<template>
	<Submenu v-if="hasChildren" :name="menu.id">
		<template slot="title">
			<img v-if="menu.icon" :src="menu.icon" />
			<span>{{name}}</span>
		</template>
		<template v-for="child in menu.children">
			<recursion-menu-item :menu="child"></recursion-menu-item>
		</template>
	</Submenu>
	<MenuItem v-else :name="menu.id">
		<img v-if="menu.icon" :src="menu.icon" />
		<span class="menu-text" :title="name">{{name}}</span>
	</MenuItem>
</template>
<script type="text/javascript">
import { MenuItem, Submenu } from 'view-design';

export default {
	name: 'RecursionMenuItem',
	props: {
		menu: Object
	},
	computed: {
		hasChildren() {
			return this.menu.children && this.menu.children.length;
		},
		name() {
			return this.menu.i18n && this.$t ? this.$t(this.menu.i18n) : this.menu.name;
		}
	},
	components: {
		MenuItem,
		Submenu
	}
}
</script>
<style type="text/css">
.menu-item span.menu-text {
	width: 74px;
}
</style>